<template>
	<view class="groupCard ss-flex" @click="goStore">
		<image class="groupCard-img" :src="sheep.$url.cdn(group.image,'ygb')" mode="aspectFill"/>
		<view class="groupCard-info ss-flex-col ss-row-between ss-flex-1">
			<view class="ss-flex-col ss-flex-1">
				<view class="info-title ss-flex ss-line-1 ss-flex-1">
					<text class="title-groupName" >{{group?.title}}</text>
				</view>
				<view class="info-service ss-line-2 ss-flex-1">
					<text class="salesVolume">
						半年售{{(data?.salesVolume || 0 ) < 50 ? '<50': formatCharCount(data.salesVolume)}}
					</text>
					<text class="service" v-for="service in  data.tag" :key="service">
						{{service}}
					</text>
				</view>
			</view>
			<view class="ss-p-b-20 ss-flex-1">
				<text class="distance ss-m-r-10 " v-if=" data.distance && data.distance.raw_m">{{data.distance.format_distance}} |</text>
				<text class="storeName">
					{{data.name}}
				</text>
			</view>
			<view class="info-price ss-flex ss-col-bottom" >
				<view class="rmb-icon">￥</view>
				<view class="price">{{group.price.length>1 ? group.price.join('~'):group.price[0]}}</view>
				<view class="line-price ss-m-l-10" v-if="group.original_price">
					￥{{group.original_price}}
				</view>
			</view>
			<button class="info-btnBox ss-reset-button" @click.stop="btnClick">
				抢
			</button>
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import { reactive, computed, onBeforeUnmount,nextTick } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
	import {formatCharCount,formatMeter} from  "@/sheep/helper/index"
	const emit = defineEmits(['onTap'])
	const props = defineProps({
		data:{
			type:Object,
			default:()=>({})
		}
	})
	const group = computed(()=>props.data.indexGoods[0])
	const state = reactive({
	})
	onLoad((opt)=>{

	})
	function btnClick(){
		sheep.$router.go('/pages/merchant/groupBuying',{
			id:group.value.id
		})
		emit('onTap',{})
	}
	function goStore(){
		sheep.$router.go('/pages/merchant/info',{
			id:props.data.id
		})
	}
</script>

<style lang="scss" scoped>
	.groupCard{
		margin:0 15rpx  15rpx;
		padding: 10rpx;
		background-color: #fff;
		border-radius: 24rpx;
		.groupCard-img{
			width: 200rpx;
			min-width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
		}
		.groupCard-info{
			position: relative;
			padding: 0 26rpx;
			height: 200rpx;
			.info-title{
				.title-shopName{
					font-family: Source Han Sans;
					font-size: 30rpx;
					font-weight: 500;
					color: #774524;
				}
				.line{
					margin: 0 20rpx;
					height: 34rpx;
					width: 2rpx;
					// background: #2C2C2C;
				}
				.title-groupName{
					font-family: Source Han Sans;
					font-size: 30rpx;
					font-weight: 500;
					color: #2C2C2C;
				}
			}
			.info-service{
				font-size: 20rpx;
				padding: 10rpx 0;
				.salesVolume{
					font-family: Source Han Sans;
					font-size: 20rpx;
					color: #F6481E;
					margin-right: 20rpx;
					padding: 0 8rpx;
					border-radius: 4rpx;
					background: #FFFFFF;
					box-sizing: border-box;
					border: 1rpx solid #F6481E;
				}
				.service{
					font-family: Source Han Sans;
					font-size: 20rpx;
					color: #F6481E;
					margin-right: 20rpx;
					padding: 0 8rpx;
					border-radius: 4rpx;
					background: #FFFFFF;
					box-sizing: border-box;
					border: 1rpx solid #F6481E;
				}
			}
			.info-price{
				position: absolute;
				bottom:0;
				left:0;
				.rmb-icon{
					font-family: Source Han Sans;
					font-size: 22rpx;
					font-weight: 500;
					color: #F43B2C;
				}
				.price{
					font-family: Source Han Sans;
					font-size: 36rpx;
					font-weight: 500;
					line-height: 1.1;
					color: #F6481E;
				}
				.line-price{
					font-size: 18rpx;
					text-decoration: line-through;
					color: #9E9E9E;
				}
			}
			.info-distance{
				font-family: Source Han Sans;
				font-size: 20rpx;
				color: #9E9E9E;
			}
			.info-btnBox{
				position: absolute;
				right: 0;
				bottom: 10rpx;
				width: 226rpx;
				height: 60rpx;
				background-image: url('https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/tuangou/qiang_btn_bg.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				font-size: 48rpx;
				color:#fff;
				font-family: YouSheBiaoTiHei !important;
				justify-content: flex-end;
				padding-right: 38rpx;
			}
		}
	}
	.storeName{
		font-family: Source Han Sans;
		font-size: 20rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: normal;
		color: #9E9E9E;
	}
	.distance{
		font-family: Source Han Sans;
		font-size: 20rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: normal;
		color: #9E9E9E;
	}
</style>